<template>
  <div>
    <!--    背景-->
    <div class="box">
    </div>
    <!--  智能机器人-->
    <!--  返回-->
    <div class="back">
      <van-nav-bar
          left-arrow
          left-text="返回"
          title="智能机器人"
          @click-left="goLeft"
      />
    </div>
    <div class="content">
      <div v-for="(item,index) in list" v-show="showQuestion" :key="index">
        <p v-html="item" class="item"></p>
        <div style="clear: both"></div>
      </div>
    </div>
    <div class="search">
      <!--  搜索-->
      <van-search
          v-model="keyWord"
          placeholder="放马过来！"
          show-action

      >
        <template #action>
          <div @click="robot">确定</div>
        </template>
      </van-search>
    </div>
  </div>
</template>

<script>
import {martRobot} from '../api/expand'
import {Toast} from "vant";

export default {
  name: "Robot",
  data() {
    return {
      keyWord: '',
      //回答的内容
      showAnswer: false,
      showQuestion: false,
      //  问题数组
      question: [],
      //  回答数组
      answer: [],
      list: [],
      isPlay: 0
    }
  },

  methods: {
    goLeft() {
      window.history.go(-1)
    },
    //发送问题
    robot() {
      if (this.isPlay < 5) {
        this.showQuestion = true;
        console.log(this.keyWord)
        this.list.push(this.keyWord);
        martRobot(this.keyWord).then(res => {
          console.log(res)
          this.list.push(res.result.content)
        })
        this.isPlay++;
        this.keyWord = '';
      } else {
        Toast.fail('测试阶段，每日限用5次！');
      }

    },


  }

}
</script>

<style lang="less" scoped>
.box {
  position: fixed;
  //top: 80px;
  background-image: url("../assets/images/robot.jpg");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -11;
  opacity: 0.5;
  //background-position-x: -40px;
  background-size: 100% 100%;

}

.search {
  position: fixed;
  width: 100%;
  bottom: 6%;

}

.content {
  padding: 15px;
  margin-bottom: 90px;

  p {
    border: 2px solid red;
    margin: 4px;
    padding: 0;
    padding: 10px;
    border-radius: 10px;
  }

  div:nth-of-type(odd) p {
    float: right;
    background-color: coral;
    margin-bottom: 5px;
  }

  div:nth-of-type(even) p {
    float: left;
  }

}

.question {
  float: right;
  border: 2px solid red;
  border-radius: 10px;
  padding: 10px;

}

</style>